<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />

    <link rel="stylesheet" href="static/index.css" />
    <link rel="stylesheet" href="static/model.css" />

    <!-- <link rel="stylesheet" href="static/styles.css"> -->
    <!-- <link rel="stylesheet" href="static/overview.css"> -->
    <link rel="stylesheet" href="static/codemirror.css">
    <link rel="stylesheet" href="static/codemirrorconfig/yonce.css">
    <link rel="stylesheet" href="static/codemirrorconfig/idea.css">
    <link rel="stylesheet" href="static/codemirrorconfig/3024-night.css">

    
    <script src="static/codemirror.js"></script>
    <script src="static/codemirrorconfig/active-line.js"></script>
    <script src="static/codemirrorconfig/matchbrackets.js"></script>
    <script src="static/codemirrorconfig/python.js"></script>
    <!-- 引入show-hint 和 python-hint -->
    <link rel="stylesheet" href="static/codemirrorconfig/show-hint.css">
    <script src="static/codemirrorconfig/show-hint.js"></script>
    <script src="static/codemirrorconfig/python-hint.js"></script>
  
    <link rel="stylesheet" href="static/xterm.min.css"/>
    <script src="static/xterm.min.js"></script>
  </head>
  <body>
   <div class="wrapper">
    <div class="header">
      <img class="logo-icon1" alt="" src="static/public/logo@2x.png" />
      <div class="sdvos-demo1">SDV.OS</div>
    </div>
    <div class="main">
      <div class="header-action">
        <div class="vehicle-signal-specification1">
          Vehicle Signal Specification
        </div>
        <div class="demo-action-list">
          <div class="demo-pop-up-item" onclick="resetCode()">
            <img class="icon" alt="" src="static/public/stop-1.svg" />
            <div class="text">Reset</div>
          </div>
          <div class="demo-pop-up-item" onclick="clearCode()">
            <img class="icon" alt="" src="static/public/eraser-1.svg" />
            <div class="text">Clear</div>
          </div>
          <div class="demo-pop-up-item" onclick="showDemoCode()">
            <img class="icon" alt="" src="static/public/windowcode-1.svg" />
            <div class="text">Demo</div>
          </div>
          <div class="demo-pop-up-item active" onclick="runCode()">
            <img class="icon" alt="" src="static/public/play-1.svg" />
            <div class="text">Run</div>
          </div>
         
        </div>
      </div>

      <div class="main-conent">
        <div class="left-box">
          <div class="search">
              <img class="search-icon1" alt="" src="static/public/search1.svg" />
              <input type="text" placeholder="search-anything" id="input1">
          </div>
          
          <!-- vss -->
          <div class="vss-list" id="vssList">

          </div>
  
          <div class="overview">
            <div class="title">
              Overview
            </div>
            <div class="content">
              <div class="left-content" id="vssDesc">
                The overall goal of the Vehicle Signal Specification (VSS) is to create a common understanding of vehicle signals in order to reach a “common language” independent of the protocol or serialisation format.
              </div>
              <div class="right-content" id="demoCodeMirror">
               
              </div>
            </div>
          </div>
        </div>
  
        <div class="right-box">
          <div class="steps">
            <div class="step">
              <div class="step-content" id="dot1">
                <img alt="" id="dot1-image" src="static/public/group-94.svg">
                <div class="title">Start</div>
                <div class="time" id="dot1-time" ></div>
              </div>
              <div class="process" id="dot1right"></div>
            </div>
            <div class="step">
              <div class="step-content" id="dot2">
                <img alt="" id="dot2-image" src="static/public/group-94.svg">
              <div class="title">Compile</div>
              <div class="time" id="dot2-time" >0.1s</div>
              </div>
              <div class="process" id="dot2right"></div>
            
            </div>
            <div class="step">
              <div class="step-content" id="dot3">
                <img alt="" id="dot3-image" src="static/public/group-94.svg">
                <div class="title">Test</div>
                <div class="time" id="dot3-time"  ></div>
              </div>
              <div class="process" id="dot3right"></div>
            </div>
            <div class="step deploy" >
              <div class="step-content" id="dot4">
                <img alt="" id="dot4-image" src="static/public/group-94.svg">
                <div class="title">Deploy</div>
                <div class="time" id="dot4-time" ></div>
              </div>
            </div>
          </div>

          <div class="coding">
            <div class="title">
              Coding
            </div>
            <div class="content" id="code">
            </div>
          </div>

          <div class="terminal">
            <div class="title">
              Terminal
            </div>
            <div class="content" id="terminal">

            </div>
          </div>

          <div class="sample">
            <div class="title">
              SAMPLE VEHICLE - ETAS AE96
            </div>

            <div class="sample-list" id="sample-list">
              
            </div>
          </div>
        </div>
      </div>
    
    </div>
   </div>

   <div class="model-box" id="model-box">
    <div class="model-mask">
      <div class="model-content">
        <div class="model-content-header">
          <div class="title">
            Select Demo
          </div>
          <div class="close-icon" onclick="handleClose()">
            <img  alt="" src="static/public/close-2.svg">
          </div>
        </div>

        <div class="demo-list">
          <div class="demo-item ">
            <div class="text1">Demo1</div>
            <div class="text2">Rain Storm</div>
            <div class="text3">
              There are a lot of things you can do in space, and space
              essentially is unlimited resources.
            </div>
            <div class="button">
              <span>
                Select
              </span>
            </div>

          </div>

          <div class="demo-item ">
            <div class="text1">Demo2</div>
            <div class="text2">Comfortable Enter</div>
            <div class="text3">
              There are a lot of things you can do in space, and space
              essentially is unlimited resources.
            </div>
            <div class="button">
              <span>
                Select
              </span>
            </div>

          </div>

          <div class="demo-item ">
            <div class="text1">Demo3</div>
            <div class="text2">All Functions</div>
            <div class="text3">
              There are a lot of things you can do in space, and space
              essentially is unlimited resources.
            </div>
            <div class="button">
              <span>
                Select
              </span>
            </div>

          </div>
        </div>
      </div>
    </div>
      
   </div>

   <!-- style="display: none;" -->
   <div class="loadingbg" id="loadCircle">
    <svg class="loading" >
     <circle class="circle" cx="60" cy="60" r="55" fill="transparent" stroke="#164293" stroke-linecap="round" stroke-width="10"></circle>
   </svg>
    </div>
  </body>
</html>

<script src="/static/car.js"></script>
<script src="/static/vss.js"></script>

<script type="text/javascript">

  function handleClose(){
    console.log(222)
    document.getElementById('model-box').style.display = 'none'

  }

  var mockCode = "import asyncio\n"+
"import json\n"+
"import signal\n"+
"import logging\n"+
"\n"+
"from sdv.vdb.subscriptions import DataPointReply\n"+
"from sdv_model import vehicle1, vehicle2\n"+
"from sdv.vehicle_app import VehicleApp\n"+
"\n"+
"logging.basicConfig(level=logging.DEBUG)\n"+
"logging.getLogger().setLevel(\"DEBUG\")\n"+
"logger = logging.getLogger(__name__)\n"+
"\n"+
"class SampleApp(VehicleApp):\n"+
"    \"\"\"\n"+
"    Sample skeleton vehicle app.\n"+
"\n"+
"    The skeleton subscribes to a getSpeed MQTT topic\n"+
"    to listen for incoming requests to get\n"+
"    the current vehicle speed and publishes it to\n"+
"    a response topic.\n"+
"\n"+
"    It also subcribes to the VehicleDataBroker\n"+
"    directly for updates of the\n"+
"    Vehicle.Speed signal and publishes this\n"+
"    information via another specific MQTT topic\n"+
"    \"\"\"\n"+
"\n"+
"    def __init__(self, vehicle_client: vehicle1):\n"+
"        super().__init__()\n"+
"        self.Vehicle = vehicle_client\n"+
"        self._idx = 0 \n"+
"\n"+
"    async def on_start(self):\n"+
"        self.Vehicle.Speed.subscribe(self.on_speed_change)\n"+
"        logger.debug(\"On start ...\")\n"+
"        print(\"Mock up for mqtt\")\n"+
"        await self.publish_mqtt_event(\"sampleapp/bt_cmd/reponse\", json.dumps({\"3d_model_door\": \"open\"}),)\n"+
"        print(\"Mock up for VSS\")\n"+
"        #await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(90)\n"+
"        asyncio.create_task(self.on_timer())\n"+
"\n"+
"    async def on_timer(self):\n"+
"        logger.debug(\"TASK LOOP ...\")\n"+
"        logger.debug(\"task loopping ...\")\n"+
"        await self.publish_mqtt_event(\"sampleapp/tasks\", json.dumps({\"period tasks\": self._idx}),)\n"+
"        self._idx = self._idx + 1\n"+
"        #await asyncio.sleep(2.0)\n"+
"        await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)\n"+
"        #await asyncio.sleep(2.0)\n"+
"        #logger.debug(await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.get())\n"+
"        #await asyncio.sleep(1.0)\n"+
"\n"+
"        pass\n"+
"    async def on_speed_change(self, data: DataPointReply):\n"+
"        print(\"on speed change\")\n"+
"        pass\n"+
"\n"+
"\n"+
"async def main():\n"+
"    \"\"\"Main function\"\"\"\n"+
"    logger.info(\"Starting SampleApp...\")\n"+
"    vehicle_app = SampleApp(vehicle2)\n"+
"    await vehicle_app.run()\n"+
"\n"+
"LOOP = asyncio.get_event_loop()\n"+
"#LOOP.add_signal_handler(signal.SIGTERM, LOOP.stop)\n"+
"LOOP.run_until_complete(main())\n"+
"LOOP.close()\n"
  var orig = CodeMirror.hint.python;
  CodeMirror.hint.python = function(cm) {
    var inner = orig(cm) || {from: cm.getCursor(), to: cm.getCursor(), list: []};
    inner.list.push("Vehicle.Cabin.Door.Row1.Left.IsOpen.set(True)");
    inner.list.push("Vehicle.Cabin.Door.Row1.Left.IsLocked.set(True)");
    inner.list.push("Vehicle.Cabin.Seat.Row1.Pos1.Position.set(1)");
    inner.list.push("Vehicle.Cabin.Seat.Row1.Pos1.Height.set(1)");
    inner.list.push("Vehicle.Cabin.Seat.Row1.Pos1.Backrest.Recline.set(1)");
    inner.list.push("Vehicle.Cabin.Lights.AmbientLight.set(1)");
    inner.list.push("Vehicle.Cabin.Lights.IsDomeOn.set(True)");
    inner.list.push("Vehicle.Body.Lights.Running.IsOn.set(True)");
    inner.list.push("Vehicle.Body.Lights.Brake.IsActive.set(True)");
    inner.list.push("Vehicle.Body.Windshield.Front.Wiping.Mode.set('TRIGGER')");
    return inner;
  };
  var myCodeMirror = CodeMirror(document.getElementById('code'), {
      lineNumbers: true,     // 显示行数
      indentUnit: 4,         // 缩进单位为4
      styleActiveLine: true, // 当前行背景高亮
      //matchBrackets: true,   // 括号匹配
      mode: 'python',        // python
      lineWrapping: true,    // 自动换行
      theme: 'idea',         // 使用idea模版
      hintOptions: {
      completeSingle: false,
      alignWithWord: false,
      hint: CodeMirror.hint.python
      },
      value: mockCode
      });
  myCodeMirror.setSize('auto','300px');

  myCodeMirror.on('keypress', (instance) => {
    
    instance.showHint();
    
  })


  const demoCodeMirror = CodeMirror(document.getElementById('demoCodeMirror'), {
      lineNumbers: true,     // 显示行数
      indentUnit: 4,         // 缩进单位为4
      styleActiveLine: true, // 当前行背景高亮
      //matchBrackets: true,   // 括号匹配
      mode: 'python',        // python
      lineWrapping: true,    // 自动换行
      theme: '3024-night',         // 使用idea模版
      hintOptions: {
      completeSingle: false,
      alignWithWord: false,
      hint: CodeMirror.hint.python
      },
      value:`print('Vehicle Signal Specification')`
      });
      demoCodeMirror.setSize('448px','276px');


  var term = new Terminal({
        //cursorStyle: 'underline', //光标样式
        cols: 80,
        rows: 6,
        fontSize: 20, // 字体大小
        letterSpacing: 2,
        fontFamily: `monospace`,
        scrollBar: true,
        cursorBlink: true, // 光标闪烁
        convertEol: true, //启用时，光标将设置为下一行的开头
        disableStdin: false, //是否应禁用输入。
        theme: {
            foreground: 'black', //字体
            background: '#fff', //背景色
            cursor: 'help',//设置光标
        },
    });

  term.open(document.getElementById('terminal'));
  term.write('ready');



  async function runCode(){
      
    const activeCar = document.getElementsByClassName('sample-item active')[0]
    activeCar.getElementsByClassName('loading-img')[0].style.display = 'flex'

    console.log(activeCar)
    initPipe();
      runPipe();
      
      term.reset();

      term.writeln('upload...10%');
      await sleep(385);
      term.clear();
      term.writeln('upload...50%');
      await sleep(385);
      term.clear();
      term.writeln('upload...80%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');

      term.writeln('compile...10%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...30%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...60%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...90%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');

      term.writeln('test...10%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...30%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...60%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...90%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...100%');

      term.writeln('deploy...20%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...100%');
      term.writeln('deploy...60%');
      await sleep(385);
      term.clear();
      term.writeln('upload...100%');
      term.writeln('compile...100%');
      term.writeln('test...100%');
      term.writeln('deploy...100%');
      activeCar.getElementsByClassName('loading-img')[0].style.display = 'none'

      var pythonCode = myCodeMirror.getValue();
      var xhr = new XMLHttpRequest();
      xhr.open('post', 'code');
      xhr.setRequestHeader('content-type', 'text/plain');
      xhr.send(pythonCode);

      if(pythonCode.indexOf('Left.IsOpen')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view to front...');
        await sleep(1000);
        term.writeln('[3D Model]bluetooth key detection...');
        await sleep(1000);
        term.writeln('[3D Model]set camera view beside door...');
        await sleep(1000);
        term.writeln('[3D Model]cabin door row1 leftHandle isTouched...');
        await sleep(1000);
        term.writeln('[3D Model]cabin door row1 left open...');
      } 
      if(pythonCode.indexOf('Left.IsLocked')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view beside door...');
        await sleep(1000);
        term.writeln('[3D Model]cabin door row1 leftHandle isTouched...');
        await sleep(1000);
        term.writeln('[3D Model]cabin door row1 left close...');
      } 
      if(pythonCode.indexOf('Pos1.Position')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view beside seat...');
        await sleep(1000);
        term.writeln('[3D Model]seat position move forward...');
        await sleep(1000);
        term.writeln('[3D Model]seat position move backward...');
      } 
      if(pythonCode.indexOf('Lights.AmbientLight')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view beside seat...');
        await sleep(1000);
        term.writeln('[3D Model]ambient light color turned yellow...');
        await sleep(1000);
        term.writeln('[3D Model]ambient light color turned red...');
        await sleep(1000);
        term.writeln('[3D Model]ambient light color turned green...');
        await sleep(1000);
        term.writeln('[3D Model]ambient light color turned blue...');
      }
      if(pythonCode.indexOf('Lights.IsDomeOn')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view beside seat...');
        await sleep(1000);
        term.writeln('[3D Model]demo light color turned on...');
        await sleep(1000);
        term.writeln('[3D Model]demo light color turned off...');
      }
      if(pythonCode.indexOf('Running.IsOn')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view front...');
        await sleep(1000);
        term.writeln('[3D Model]running light turned on...');
        await sleep(1000);
        term.writeln('[3D Model]running light turned off...');
      }
      if(pythonCode.indexOf('Brake.IsActive')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view behind...');
        await sleep(1000);
        term.writeln('[3D Model]Brake light turned on...');
        await sleep(1000);
        term.writeln('[3D Model]Brake light turned off...');
      }
      if(pythonCode.indexOf('Wiping.Mode')>-1){
        await sleep(1000);
        term.writeln('[3D Model]set camera view behind...');
        await sleep(1000);
        term.writeln('[3D Model]front wiper turned on...');
        await sleep(1000);
        term.writeln('[3D Model]front wiper turned off...');
      }
      xhr.onload = function() {
          term.writeln(xhr.response);
      }

    
  }

  function initPipe(){
    document.getElementById('dot1-time').innerText = ''
    document.getElementById('dot2-time').innerText = ''
    document.getElementById('dot3-time').innerText = ''
    document.getElementById('dot4-time').innerText = ''

    document.getElementById('dot1').classList.remove('active');
    document.getElementById('dot1-image').setAttribute('src','static/public/group-94.svg')
    document.getElementById('dot1right').classList.remove('line-active');

    document.getElementById('dot2').classList.remove('active');
    document.getElementById('dot2-image').setAttribute('src','static/public/group-94.svg')
    document.getElementById('dot2right').classList.remove('line-active');

    document.getElementById('dot3').classList.remove('active');
    document.getElementById('dot3-image').setAttribute('src','static/public/group-94.svg')
    document.getElementById('dot3right').classList.remove('line-active');

    document.getElementById('dot4').classList.remove('active');
    document.getElementById('dot4-image').setAttribute('src','static/public/group-94.svg')

    // document.getElementById('dot2').classList.remove('active');
    // document.getElementById('dot3').classList.remove('active');
    // document.getElementById('dot4').classList.remove('active');
    // document.getElementById('dot1right').classList.remove('line_active');
    // document.getElementById('dot2left').classList.remove('line_active');
    // document.getElementById('dot2right').classList.remove('line_active');
    // document.getElementById('dot3left').classList.remove('line_active');
    // document.getElementById('dot3right').classList.remove('line_active');
    // document.getElementById('dot4left').classList.remove('line_active');
  }

  async function runPipe(){
    var start = new Date().getTime();
    document.getElementById('loadCircle').style.display = 'block';
    await sleep(500);
    document.getElementById('dot1-time').innerText = '0.3s'

    document.getElementById('dot1').classList.add('active');
    document.getElementById('dot1-image').setAttribute('src','static/public/64x64.gif')

    await sleep(500);
    document.getElementById('dot1right').classList.add('line-active');
    document.getElementById('dot1-image').setAttribute('src','static/public/group-81.svg')

    await sleep(500);
    document.getElementById('dot2').classList.add('active');
    document.getElementById('dot2-image').setAttribute('src','static/public/64x64.gif')
    await sleep(1200);
    document.getElementById('dot2right').classList.add('line-active');
    document.getElementById('dot2-image').setAttribute('src','static/public/group-81.svg')
    document.getElementById('dot2-time').innerText = '0.84s'

    await sleep(500);
    document.getElementById('dot3').classList.add('active');
    document.getElementById('dot3-image').setAttribute('src','static/public/64x64.gif')
    await sleep(1200);
    document.getElementById('dot3right').classList.add('line-active');
    document.getElementById('dot3-image').setAttribute('src','static/public/group-81.svg')
    document.getElementById('dot3-time').innerText = '0.9s'


    document.getElementById('dot4').classList.add('active');
    document.getElementById('dot4-image').setAttribute('src','static/public/64x64.gif')
    await sleep(1800);
    document.getElementById('dot4-image').setAttribute('src','static/public/group-81.svg')
    document.getElementById('dot4-time').innerText = '1.95s'

    document.getElementById('loadCircle').style.display = 'none';
    
    
    // var taketime = ((new Date().getTime() - start)/1000+Math.random()*3).toFixed(1);
    // document.getElementById('taketime').innerText=taketime+'s';
  }


  function sleep(time){
  return new Promise((resolve) => setTimeout(resolve, time));
  }
  
  function resetCode(){
    myCodeMirror.setValue(mockCode);
  }

  function clearCode(){
    myCodeMirror.setValue("");
  }

  // document.getElementById('desc').childNodes[0].innerText="The overall goal of the Vehicle Signal Specification (VSS) is to create a common understanding of vehicle signals in order to reach a “common language” independent of the protocol or serialisation format."

  // VSS对应描述与代码
  sortVssAndBindClick();
  function sortVssAndBindClick(){
    var vss = document.getElementsByClassName('vss-item');
    var startTop = 0;
    var interval = 84;
    for (var i = 0; i < vss.length; i++) {
      // vss[i].style.top=startTop+interval*i;
      vss[i].addEventListener("click", function(e){
        
        const title = this.getElementsByClassName('title')[0].innerText
        const item = vssList.find(item=>item.title === title)
        for (var i = 0; i < vss.length; i++) {
          vss[i].setAttribute('class','vss-item')
        }
        this.setAttribute('class','vss-item active')
        console.log(demoCodeMirror)
        demoCodeMirror.setValue(item.code)
        document.getElementById('vssDesc').innerText = item.desc

        var replaceCode = this.childNodes[5].innerText;
        var finalCode = mockCode.replaceAll("Cabin.Seat.Row1.Pos1.Position",replaceCode);
        if(replaceCode.indexOf('.Is')>-1){
          finalCode = finalCode.replaceAll('set(self._idx)','set(True)')
        }else if(replaceCode.indexOf('Mode')>-1){
          finalCode = finalCode.replaceAll('set(self._idx)','set("TRIGGER")')
        }else{
          finalCode = finalCode.replaceAll('set(self._idx)','set(1)')
        }
        myCodeMirror.setValue(finalCode);
      });
    }   

  }

  function showDemoCode(){
    // var demoPopBox = document.getElementById('demoBox');
    // if(demoPopBox.style.display == 'block'){
    //   demoPopBox.style.display = 'none'
    // }else{
    //   demoPopBox.style.display = 'block'
    // }
    document.getElementById('model-box').style.display = 'block'

  }

  document.getElementById('input1').oninput = function(e){
    if(e.target.value){
      searchVSS()
    }else{
      clearSearch()
    }
  }

  function searchVSS(){
    console.log(111)
    var searchText = document.getElementById('input1').value;
    var vss = document.getElementsByClassName('vss-item');
    // var startTop = 0;
    // var interval = 84;
    // var matchedCount = 0;
    for (var i = 0; i < vss.length; i++) {
      new RegExp('oo', 'ig').test('Door')
      if(new RegExp(searchText, 'ig').test(vss[i].innerText)){
        // vss[i].style.top=startTop+interval*matchedCount;
        // matchedCount = matchedCount+1;
      vss[i].style.display = 'flex'

      }else{
        vss[i].style.display = 'none'
      }
    }
  }

  function clearSearch(){
    var vss = document.getElementsByClassName('vss-item');
   
    for (var i = 0; i < vss.length; i++) {
      // vss[i].removeAttribute("hidden");
      vss[i].style.display = 'flex'

    }

  }

  var carList = document.querySelectorAll(".sample-item");
  
  for (i = 0; i < carList.length; i++) {
    carList[i].onclick = function(){
      for (i = 0; i < carList.length; i++){
        carList[i].setAttribute('class','sample-item ')
      }
      this.setAttribute('class','sample-item active')
    }
  }

  var demoList = document.querySelectorAll(".demo-item");

  var demo_rain = mockCode.replace("await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)",
           "await self.Vehicle.Body.Lights.Running.IsOn.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Body.Lights.Brake.IsActive.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Body.Windshield.Front.Wiping.Mode.set('TRIGGER')\n"
  );
  var demo_comfortable = mockCode.replace("await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)",
           "await self.Vehicle.Body.Lights.Running.IsOn.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Body.Lights.Brake.IsActive.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Door.Row1.Left.IsOpen.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(1)\n"
  +"        await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(-1)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(1)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(2)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(3)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(4)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(5)\n"
  );

  var demo_allFunction = mockCode.replace("await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)",
           "await self.Vehicle.Body.Lights.Running.IsOn.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Body.Lights.Brake.IsActive.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Body.Windshield.Front.Wiping.Mode.set('TRIGGER')\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Door.Row1.Left.IsOpen.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(1)\n"
  +"        await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(-1)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(1)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(2)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(3)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(4)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(5)\n"
  +"        await self.Vehicle.Cabin.Lights.AmbientLight.set(1)\n"
  +"        await self.Vehicle.Cabin.Lights.IsDomeOn.set(True)\n"
  +"        await self.Vehicle.Cabin.Lights.IsDomeOn.set(False)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        await self.Vehicle.Cabin.Door.Row1.Left.IsLocked.set(True)\n"
  );

  var demo_doorOpen = mockCode.replace("await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)",
           "await self.Vehicle.Cabin.Door.Row1.Left.IsOpen.set(True)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        for i in range(5):\n"         
  +"            await self.Vehicle.Body.Lights.Brake.IsActive.set(True)\n"
  +"            await self.Vehicle.Body.Lights.Brake.IsActive.set(False)\n"
  );

  var demo_findCar = mockCode.replace("await self.Vehicle.Cabin.Seat.Row1.Pos1.Position.set(self._idx)",
           "await self.Vehicle.Body.Windshield.Front.Wiping.Mode.set('TRIGGER')\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        for i in range(5):\n"         
  +"            await self.Vehicle.Body.Lights.Running.IsOn.set(True)\n"
  +"            await self.Vehicle.Body.Lights.Running.IsOn.set(False)\n"
  +"        await asyncio.sleep(2.0)\n"
  +"        for i in range(5):\n"         
  +"            await self.Vehicle.Body.Lights.Brake.IsActive.set(True)\n"
  +"            await self.Vehicle.Body.Lights.Brake.IsActive.set(False)\n"
  );
  
  for (i = 0; i < demoList.length; i++) {
    demoList[i].onclick = function(){
      for (i = 0; i < demoList.length; i++){
        demoList[i].classList.remove('active')
      
      }
      this.classList.add('active');
      
      if(this.innerText.indexOf('Demo1')>-1){
        myCodeMirror.setValue(demo_rain);
      }
      if(this.innerText.indexOf('Demo2')>-1){
        myCodeMirror.setValue(demo_comfortable);
      }
      if(this.innerText.indexOf('Demo3')>-1){
        myCodeMirror.setValue(demo_allFunction);
      }

      handleClose()
    }
  }
  
</script>